<template>
    <div class="mrc_ess_Tabs">
        <div class="pl-2 pr-2 flex align-center justify-between pb-4">
            <!-- 選項卡 -->
            <v-tabs v-model="value" align-tabs="start" color="primary">
                <v-tab :value="item.value" v-for="item in items" :key="item.value">{{ item.i18n ? $t(item.i18n) :
                    $t(item[props.itemTitle]) }}</v-tab>
            </v-tabs>
            <!-- 右側插槽 -->
            <div class="ml-4">
                <slot name="right"></slot>
            </div>
        </div>
        <!-- 内容 -->
        <v-tabs-window v-model="value">
            <v-tabs-window-item v-for="item in items" :key="item[props.itemValue]" :value="item[props.itemValue]">
                <slot :name="item[props.itemValue] + '-content'"></slot>
            </v-tabs-window-item>
        </v-tabs-window>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
const props = defineProps({
    items: {
        type: Array<any>,
        default: []
    },
    // 標題字段
    itemTitle: {
        type: String,
        default: "title"
    },
    // 值字段
    itemValue: {
        type: String,
        default: "value"
    },
})
// 當前選中的tab
const value = defineModel();
// 監聽tab數據
watch(() => props.items, () => {
    // 默認選中第一個tab
    if (props.items && props.items.length) {
        value.value = props.items[0].value;
    }
}, {
    immediate: true
})
</script>

<style scoped>
.mrc_ess_Tabs :deep(.v-tab.v-tab.v-btn) {
    min-width: auto;
    padding-left: 0;
    padding-right: 0;
    margin-right: 16px;
    text-transform: none;
}
</style>